<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="joose.js"></script>
<script src="jquery-1.8.3.js"></script>
<script src="jquery.ba-dotimeout.js"></script>
<script src="kinetic-v4.1.2.js"></script>
<script src="AnimationWrapper.js"></script>
</head>

<body>
<div id="container"></div>
<script>
	var stage = new Kinetic.Stage({
		container: "container",
		width: 750,
		height: 400
	});
	var layer1 = new Kinetic.Layer();
	var group1 = new Kinetic.Group();
	
	var rect1 = new Kinetic.Rect({
		x: 80 + 50,
		y: 80 + 25,
		width: 100,
		height: 50,
		fill: "green",
		opacity: 1,
		offset: {
			x: 50,
			y:25
			},
		shadow: {
			color: "gray",
			blur: 20,
			offset: [0,0],
			opacity: 0.8
			},
		scale:{
			x: 2,
			y: 3
			}
		});
	group1.add(rect1);
	layer1.add(group1);
	stage.add(layer1);
	
	rect1.on("click", function(evt){
		if(this._animation == null){
			var ani = new AnimationWrapper({
				node: this,
				duration: 1500,
				delay: 0,
				loop: true
				});
			this._animation = ani;
			ani.createAnimation("ZoomOut", {layer: layer1, scaleX: 1, scaleY: 1});
			//ani.setDuration(2000);
			//ani.setCallback(callbackFn, null);
			ani.start();
			}
		else{
			this._animation.stop();
			this._animation = null;
			}
		});
	function callbackFn(){
			alert("callback called!");
		}
</script>

</body>
</html>
